<template>
  <div class="info-container">
    <el-card class="filter-container" shadow="never">
      <div>
        <i class="el-icon-search"></i>
        <span>筛选搜索</span>
        <el-button style="float:right" type="primary" @click="handleSearchList()" size="small">
          查询搜索
        </el-button>
        <el-button style="float:right;margin-right: 15px" @click="handleResetSearch()" size="small">
          重置
        </el-button>
      </div>
      <div style="margin-top: 15px">
        <el-form :inline="true" :model="listQuery" size="small" label-width="140px">
          <el-form-item label="积分增减">
            <el-select class="input-width" v-model="listQuery.operaType" placeholder="积分增减">
              <el-option label="增加" value="1"></el-option>
              <el-option label="减少" value="0"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="客户端类型">
            <el-select class="input-width" v-model="listQuery.clientId" placeholder="客户端类型">
              <el-option label="所有类型" value="ALL"></el-option>
              <el-option label="微信" value="WX"></el-option>
              <el-option label="app" value="APP"></el-option>
              <el-option label="网页" value="WEB"></el-option>
            </el-select>
          </el-form-item>
          <!-- <el-form-item label="积分获取类型">
            <el-input v-model="listQuery.scoreType" class="input-width" placeholder="积分获取类型"></el-input>
          </el-form-item> -->
        </el-form>
      </div>
    </el-card>
    <div class="dataList">
      <el-card class="operate-container" shadow="never">
        <i class="el-icon-tickets"></i>
        <span>账单记录</span>
      </el-card>
      <el-table :data="tableData" style="width: 100%" v-loading="listLoading">
        <!-- <el-table-column label="会员ID">{{$route.query.id}}</el-table-column> -->
        <el-table-column label="创建时间">
          <template slot-scope="scope">
            <p>{{scope.row.createTime|formatTime}}</p>
          </template>
        </el-table-column>
        <el-table-column prop="remark" label="客户端类型">
          <template slot-scope="scope">
            <p>{{scope.row.clientId|clientStatus}}</p>
          </template>
        </el-table-column>
        <el-table-column prop="amount" label="积分获取类型">
          <template slot-scope="scope">
            <p>{{scope.row.scoreType | scoreType}}</p>
          </template>
        </el-table-column>
        <el-table-column prop="afterAmount" label="积分获取时间">
          <template slot-scope="scope">
            <p>{{scope.row.scoreCreateTime|formatTime}}</p>
          </template>
        </el-table-column>
        <el-table-column prop="afterAmount" label="积分失效时间">
          <template slot-scope="scope">
            <p>{{scope.row.scoreInvalidTime|formatTime}}</p>
          </template>
        </el-table-column>
        <el-table-column prop="afterAmount" label="积分增减">
          <template slot-scope="scope">
            <p>{{scope.row.operaType|operaTypeStatus}}</p>
          </template>
        </el-table-column>
        <el-table-column prop="afterAmount" label="变化积分">
          <template slot-scope="scope">
            <p>{{scope.row.score}}</p>
          </template>
        </el-table-column>
        <el-table-column prop="afterAmount" label="剩余积分">
          <template slot-scope="scope">
            <p>{{scope.row.afterScore}}</p>
          </template>
        </el-table-column>
        <el-table-column prop="afterAmount" label="描述">
          <template slot-scope="scope">
            <p>{{scope.row.remark}}</p>
          </template>
        </el-table-column>

        <el-table-column prop="afterAmount" label="状态">
          <template slot-scope="scope">
            <p>{{scope.row.status|ListStatus}}</p>
          </template>
        </el-table-column>


      </el-table>
    </div>
    <div class="pagination-container">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
        layout="total, sizes,prev, pager, next,jumper" :current-page.sync="pageNum" :page-size.sync="pageSize"
        :page-sizes="[5,10,15]" :total="total"></el-pagination>
    </div>
  </div>
</template>
<script>
  import { formatDate } from '@/utils/date'
  export default {
    data() {
      const defaultListQuery = {
        pageNum: 1,
        pageSize: 5,
        operaType: '',
    //    scoreType: '',
        clientId:''
      };

      return {
        pageNum: 1,
        pageSize: 10,
        total: null,
        listLoading: true,
        value11: '',
        income: '',
        outcome: '',
        tableData: [],
        titleData: [
          '会员名称',
          '会员账号',
          '会员手机',
          '会员等级',
          '创建时间',
          '会员余额'
        ],
        infoData: {
          name: 'xxx',
          userName: 'ppp',
          phone: '12345678912',
          level: '普通用户',
          createTime: '2019-09-09 18:30:20',
          balance: '100'
        },
        listQuery: Object.assign({}, defaultListQuery),
      }
    },
    computed: {
      incomeper() {
        var str = Number((this.income / (this.outcome + this.income)) * 100)
        return str
      },
      outcomeper() {
        var str = Number((this.outcome / (this.outcome + this.income)) * 100)
        return str
      }
    },
    filters: {
      formatTime(time) {
        if (time == null || time === '') {
          return 'N/A'
        }
        let date = new Date(time)
        return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
      },
      scoreType(type) {
        if (type == 1) {
          return '注册送积分'
        }
      },
      clientStatus(status) {
        if (status === 'APP') {
          return 'APP';
        } else if (status === 'WEB') {
          return '网页';
        } else if (status === 'ALL') {
          return '所有平台';
        } else if (status === 'WX') {
          return '微信';
        }
      },
      ListStatus(status) {
        if (status == 0) {
          return '无效';
        } else if (status == 1) {
          return '有效';
        }
      },
      operaTypeStatus(status){
        if (status == 0) {
          return '减少';
        } else if (status == 1) {
          return '增加';
        }
      }
    },
    created() {
      this.getList()
    },
    methods: {
      handleSizeChange() {
        this.getList()
      },
      handleCurrentChange() {
        this.getList()
      },
      handleResetSearch() {
        this.listQuery = Object.assign({}, defaultListQuery);
      },
      handleSearchList() {
        this.listQuery.pageNum = 1;
        this.getList();
      },
      getList() {
        this.listLoading = true

        this.$http
          .post('/memberPointsChangeRecord/selete', {
            memberId: this.$route.query.id,
            ...this.listQuery
          })
          .then(data => {
            this.tableData = data.info
            this.total = data.totalnum
            this.listLoading = false
          })
          .catch(error => {
            console.log(error)
          })
      },
      filterSearch() {
        console.log(`删选的日期时间为${this.value11}`)
      }
    }
  }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  @import '../../../styles/variables.scss';

  .info-container {
    padding: 20px;
  }
</style>